import { EllipsisProps, GlobalThemeOverrides, PopoverProps } from 'naive-ui'

export const baseOverrides: GlobalThemeOverrides = {
	Tabs: {
		barColor: 'var(--color-primary)',
		tabTextColorActiveBar: 'var(--color-primary)',
		tabTextColorHoverBar: 'var(--color-text-2)',
		tabTextColorBar: 'var(--color-text-1)',
		tabFontSizeLarge: '14px',
		tabPaddingLargeBar: '10px 20px'
	},
	Button: {
		heightLarge: '48px',
		borderRadiusLarge: '8px',
		fontSizeLarge: '16px',
		border: '1px solid transparent',
		borderHover: '1px solid transparent',
		borderPressed: '1px solid transparent',
		borderFocus: '1px solid transparent',
		borderDisabled: '1px solid transparent'
	},
	Form: {
		labelFontSizeLeftLarge: '14px',
		labelFontWeight: 600,
		labelTextColor: 'var(--color-text-1)',
		labelHeightLarge: '26px'
	},
	Input: {
		heightLarge: '48px',
		borderRadius: '8px',
		paddingLarge: '12px',
		fontSizeLarge: '14px',
		boxShadowFocus: 'unset',
		iconColor: 'var(--color-text-3)',
		color: 'var(--color-bg-2)',
		colorFocus: 'var(--color-bg-2)',
		clearColor: 'var(--color-text-3)'
	},
	Checkbox: {
		labelFontWeight: 600
	},
	Popover: {
		textColor: 'var(--color-text-1)',
		color: 'var(--color-bg-1)',
		padding: '0',
		borderRadius: '8px',
		arrowHeight: '8px',
		spaceArrow: '8px'
	},
	Scrollbar: {
		railInsetHorizontalTop: '0 2px auto 2px',
		railInsetHorizontalBottom: 'auto 2px 0 2px',
		railInsetVerticalLeft: '2px auto 2px 0',
		railInsetVerticalRight: '2px 0 2px auto'
	},
	Switch: {
		railColorActive: 'var(--color-primary)',
		buttonWidthLarge: '20px',
		buttonHeightLarge: '20px',
		buttonWidthPressedLarge: '20px',
		buttonHeightPressedLarge: '20px',
		railHeightLarge: '24px',
		railWidthLarge: '44px'
	},
	Message: {
		margin: '0 0 20px 0',
		minWidth: '500px'
	}
}

export const darkThemeOverrides: GlobalThemeOverrides = {
	...baseOverrides,
	common: {
		primaryColor: '#7864ff',
		primaryColorHover: '#826eff',
		primaryColorPressed: '#6e5af5',
		successColor: '#00be7a',
		successColorHover: '#0ac884',
		successColorPressed: '#00b470',
		warningColor: '#febc04',
		warningColorHover: '#ffc60e',
		warningColorPressed: '#f4b200',
		errorColor: '#f80563',
		errorColorHover: '#ff0f6d',
		errorColorPressed: '#ee0059',
		infoColor: '#0688f9',
		infoColorHover: '#1092ff',
		infoColorPressed: '#007eef',
		fontWeight: '600',
		fontWeightStrong: '600'
	}
}

export const lightThemeOverrides: GlobalThemeOverrides = {
	...baseOverrides,
	common: {
		primaryColor: '#7864ff',
		primaryColorHover: '#826eff',
		primaryColorPressed: '#6e5af5',
		successColor: '#1ac157',
		successColorHover: '#24cb61',
		successColorPressed: '#10b74d',
		warningColor: '#febc04',
		warningColorHover: '#ffc60e',
		warningColorPressed: '#f4b200',
		errorColor: '#ff0032',
		errorColorHover: '#ff0a3c',
		errorColorPressed: '#f50028',
		infoColor: '#409eff',
		infoColorHover: '#1092ff',
		infoColorPressed: '#007eef'
	}
}

/**
 * 这里是对 naive-ui 无法在Overrides上进行配置的补充; 使用时手动引入
 * @example
 * <n-ellipsis v-bind="NBind.Ellipsis">
 */
export const NBind = {
	Ellipsis: <EllipsisProps>{
		tooltip: {
			style: {
				'--n-padding': '8px 14px',
				'--n-text-color': 'var(--color-text-1)',
				'--n-color': 'var(--color-bg-5)'
			}
		}
	},
	Popover: <PopoverProps>{
		style: {
			'--n-padding': '8px 12px',
			'--n-border-radius': '8px',
			'--n-text-color': 'var(--color-text-6)',
			'--n-color': 'var(--color-white)',
			'--n-arrow-height': '8px',
			'--n-space-arrow': '8px'
		}
	}
}
